docs Usage Props and css variables

Props

ComponentMap

  • Description: This prop, as previously discussed, links the component name with its class reference. Altron sets it as context.
  • Type: Map<string, ComponentType>
  • Default value: An empty map.

initialData

  • Description: Used to initialize the editor with data. The initial data must adhere to the datablock type, and the provided data undergoes validation to ensure unique IDs.
  • Type: dataBlock[]
  • Default value: An empty list.

viewMode

  • Description: Specifies whether Altron is used for editing or just viewing.
  • Type: boolean
  • Default value: false

iframeSettings

  • Description: This prop is an object that specifies the settings for the iframe used in the embed block. Altron sets it as context.
  • Type: iframeSettingsType
  • Default value: An empty object.

attachmentTypes

  • Description: Restricts the accepted attachments by the attachment block to the chosen mime type .
  • Type: string
  • Default value: "*"

acceptedEmbedSrcs

  • Description: Provides a description of the accepted sources by the embed block and a list of regex rules to match these accepted sources.
  • Type: { rules: string[], description: string}
  • Default value: { description: 'You should enter a valid URL for an embed; any source is accepted', rules: [] }

processEmbedSrcs

  • Description: A method that processes the accepted source before setting it to the block value.
  • Type: (src:string)=>string
  • Default value: (src)=>src

codeBlockLanguages

  • Description: The list of languages that end-users can choose inside the code block.
  • Type: string[]
  • Default value: ['javascript', 'java','c','css','plaintext','typescript','python','csharp']

excludedBlocks

  • Description: The list of blocks you want to exclude from the toolbar.
  • Type: block[]
  • Default value: []

sizeLimits

  • Description: This prop sets a size limit on images and attachments that get loaded
  • Type: {imgs:number,attachments:number}
  • Default value: {imgs:-1,attachments:-1}
  • Notes : -1 means no size limit and the size is in mega bytes.

Css variables

Variable Default Value
--width 95%
--primary-color #3367ff
--secondary-color #2eeb36
--text-color #121213
--bg-color #ffffff
--heading-font 'Verdana, sans-serif'
--body-font 'Helvetica, sans-serif'
--h1-size clamp(, calc(1.8rem + ((1vw - 0.48rem) * 0.9722)), 2.1rem)
--h1-size clamp(1.5rem, calc(1.5rem + ((1vw - 0.48rem) * 0.9722)), 1.8rem)
--h3-size clamp(1.2rem, calc(1.2rem + ((1vw - 0.48rem) * 0.9722)), 1.5rem)
--h4-size clamp(1.125rem, calc(1.15rem + ((1vw - 0.48rem) * 0.3472)), 1.2rem)
--body-size clamp(2rem, calc(1rem + ((1vw - 0.48rem) * 0.1736)), 1.125rem)
--small-size clamp(1.875rem, calc(0.875rem + ((1vw - 0.48rem) * 0.1736)), 1rem)
--block-gap 10px